import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $http, $Lazy } = window
// ===================================================================== Lazy
const Tabs = $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		index:0,
		pages: [
			{ component:$Lazy.state(()=>import('./cpt/a')) },
			{ component:$Lazy.state(()=>import('./cpt/b')) },
			{ component:$Lazy.state(()=>import('./cpt/c')) },
		]
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [
		{ title:'加减项', 	status:0 },
		{ title:'客户反馈', 	status:1 },
		{ title:'信息修改', 	status:2 }
	]
	
	// 操作按钮
	controls =  () => [
		Controls.click.call(this, '清空', ()=> this['ref' + this.state.index].clear(), { ghost:true} ),
		Controls.click.call(this, '保存', ()=> {
			this['ref' + this.state.index].onSubmit?.()
		} )
	]
	
	setValue = async rows => {
		this.rows = rows
		const { index } = this.state
		
		const natureData = await $http.pull(null,'sp-customer-log/getSpecInfo', { param:{ spec_code: rows['spec_code']  }})
		this.setState({ natureData })
		
		await $http.pull(this,'sp-customer-log/getInfoBySpec', { param: {spec_code: rows['spec_code']} }).then(({spec_info})=>{
			this.setState({ backData:spec_info })
		})
		
		this['ref' + index].setValue(rows)
	}
	
	render(){
		const { index, pages, natureData, backData } = this.state
		const { onRefresh } = this.props
		return (
			<div className='fv ex'>
				{/* 选项卡 */}
				<Tabs
					controls	=  { this.controls() }
					data		= { this.tabs }
					onTabs		= { (data, index) => {
						pages[+index].first = true
						this.setState({ index:+index, pages })
						
						if(this['ref' + index]?.setValue){
							this['ref' + index].setValue(this.rows)
						}else{
							setTimeout(()=>{
								this['ref' + index].setValue(this.rows)
							},500)
						}
					}}
				/>
				<div className='bcf ex rel'>
					<div className='abs_full p10 oys scrollbar'>
						{
							pages.map((v,i)=> v.first && <div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}><v.component natureData={natureData} backData={backData} onRefresh={onRefresh} onRef={ ref => this['ref'+i] = ref } /></div>)
						}
					</div>
				</div>
			</div>
		)
	}
}

export default Index